<template>
     <el-row :gutter="20" style="margin-top: 20px; margin-left: 50px;">
        <el-col :span="10"><div class="grid-content bg-purple"></div>
            <el-table
            :data="tableData1"
            style="width: 100%">
            <el-table-column
              prop="1"
              label="发送方流量"
              width="180">
            </el-table-column>
            <el-table-column
              prop="3"
              label="发送方速率"
              width="180">
            </el-table-column>
            <el-table-column
              prop="2"
              label="包">
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="10"><div class="grid-content bg-purple"></div>
            <el-table
            :data="tableData2"
            style="width: 100%">
            <el-table-column
              prop="1"
              label="接收方流量"
              width="180">
            </el-table-column>
            <el-table-column
              prop="3"
              label="接收方速率"
              width="180">
            </el-table-column>
            <el-table-column
              prop="2"
              label="包">
            </el-table-column>
            <el-table-column
              prop="packetloss"
              label="丢包率">
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
</template>

<script>
    export default {

    data() {
        return {
            tableData1: [{
            0: '',
            1: '',
            2: '',
            3: ''
          }, ],
          tableData2: [{
            0: '',
            1: '',
            2: '',
            3: '',
            packetloss:''
          }],
          package:[],
          package2:[],
          dataId: [],
          valueId:'',
          value1: '',
          start_time:'',
          end_time:''
        };
    },
    methods:{
        handleChange(){
          this.start_time = Date.parse(new Date(new Date().setHours(0, 0, 0, 0))).toString().substr(0,10),
          this.end_time = Date.parse(new Date(new Date().setHours(23, 59, 59, 59))).toString().substr(0,10),

          this.showTable(this.valueId,this.start_time,this.end_time)
        },
        daterangeSj(){
             var starttime = (this.value1[0]).valueOf(); // 通过valueOf()函数返回指定对象的原始值获得准确的时间戳值
             var endtime = (this.value1[1]).valueOf();
             //精确到秒
             this.start_time = starttime.toString().substr(0,10);
             this.end_time = endtime.toString().substr(0,10);
        },
        addini(){
            this.axios({url:"http://192.168.90.74:5000/get_newIds?flag=1"}).then((res)=>{
                   this.dataId = res.data.data
				    }).catch(()=>{})
        },
        showTable(){
            //发送方
            var k = 1024
            var sizes = ['B', 'KB', 'MB', 'GB', 'TB']

            var sizesl = ['bps', 'kbps', 'mbps', 'gbps']
            this.axios({url:"http://192.168.90.74:5000/get_real_time?flag=1"}).then((res1)=>{
                        res1.data.data.forEach(function(item,index,data){
                          if(data[index][3] == 0){
                            res1.data.data[index][3] = '0 bps'
                          }else {
                            //速率
                            var tempspeed = data[index][3]*8
                            var i = Math.floor(Math.log(tempspeed) / Math.log(k));
                            res1.data.data[index][3] = (tempspeed  / Math.pow(k, i)).toFixed(2) + ' ' + sizesl[i]
                          }
                          if(data[index][1] == 0){
                            res1.data.data[index][1] = '0 KB'
                          }else{
                            //流量
                            var i = Math.floor(Math.log(data[index][1]) / Math.log(k));
                            res1.data.data[index][1] = (data[index][1] / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i]
                          }
                        })
                        //包
                        this.package = res1.data.data[0][2]

                        this.tableData1 = res1.data.data

                        this.axios({url:"http://192.168.90.74:5000/get_real_time?flag=2"}).then((res1)=>{
                        res1.data.data.forEach(function(item,index,data){
                          if(data[index][3] == 0){
                            res1.data.data[index][3] = '0 bps'
                          }else {
                            //速率
                            var tempspeed = data[index][3]*8
                            var i = Math.floor(Math.log(tempspeed) / Math.log(k));
                            res1.data.data[index][3] = (tempspeed  / Math.pow(k, i)).toFixed(2) + ' ' + sizesl[i]
                          }
                          if(data[index][1] == 0){
                            res1.data.data[index][1] = '0 KB'
                          }else{
                            //流量
                            var i = Math.floor(Math.log(data[index][1]) / Math.log(k));
                            res1.data.data[index][1] = (data[index][1] / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i]
                          }
                        })
                        //包
                        this.package2 = res1.data.data[0][2]
                        var sl = 0
                        console.log(this.package)
                        if(this.package !== this.package2){
                          sl = (this.package - this.package2) / this.package*100
                        }else if(this.package < this.package2){
                          sl = 0
                        }
                        this.tableData2 = res1.data.data
                        this.tableData2[0].packetloss = sl.toFixed(2) + '%'
                        console.log(this.tableData2,"接收方")        
            }).catch(()=>{})      
            }).catch(()=>{})
        },
    },
    mounted(){
     
     clearInterval(myTimeDisplay );//销毁之前定时器
        var myTimeDisplay = setInterval(() => {
            this.showTable()
        }, 1000);
    }
    };
</script>
  